<template>
  <view v-if="tabbar?.list.length > 0" class="u-page__item">
    <su-tabbar
      :value="path"
      :fixed="true"
      :placeholder="true"
      :safe-area-inset-bottom="true"
      :inactive-color="tabbar.inactiveColor"
      :active-color="tabbar.activeColor"
      :mid-tab-bar="tabbar.mode === 2"
      :custom-style="tabbarStyle"
    >
      <su-tabbar-item
        v-for="(item, index) in tabbar.list"
        :key="item.text"
        :text="getLangValue(item.text)"
        :name="item.url"
        :is-center="getTabbarCenter(index)"
        :center-image="item.inactiveIcon"
        @click="sheep.$router.go(item.url)"
      >
        <template #active-icon>
          <image class="u-page__item__slot-icon" :src="item.activeIcon" />
        </template>
        <template #inactive-icon>
          <image class="u-page__item__slot-icon" :src="item.inactiveIcon" />
        </template>
      </su-tabbar-item>
    </su-tabbar>
  </view>
</template>

<script setup>
import { computed, unref, ref } from 'vue'
import sheep from '@/sheep'
import useLang from '@/sheep/hooks/useLang.js'
	const { getLangValue } = useLang()
	
// 工作台
const  staging_active = ''
const staging_inactive = ''
const my_inactive = ''
const my_active = ''


const tabbar = ref({
  mode: 1,
  layout: 1,
  inactiveColor: '#333',
  activeColor: '#000',
  list: [
    {
      inactiveIcon: staging_inactive,
      activeIcon: staging_active,
      url: '/pages/index/index',
      text: '工作台'
    },
    {
      inactiveIcon: my_inactive,
      activeIcon: my_active,
      url: '/pages/index/user',
      text: '我的'
    }
  ],
  background: {
    type: 'color',
    bgImage: '',
    bgColor: '#fff'
  }
})

const tabbarStyle = computed(() => {
  const backgroundStyle = tabbar.value.background
  return { background: backgroundStyle.bgColor }
})

const getTabbarCenter = (index) => {
  if (unref(tabbar).mode !== 2) return false
  return unref(tabbar).list % 2 > 0 ? Math.ceil(unref(tabbar).list.length / 2) === index + 1 : false
}

const props = defineProps({
  path: String,
  default: ''
})
</script>

<style lang="scss">
.u-page {
	padding: 0;

	&__item {
		&__title {
			color: var(--textSize);
			background-color: #fff;
			padding: 15px;
			font-size: 15px;

			&__slot-title {
				color: var(--textSize);
				font-size: 14px;
			}
		}

		&__slot-icon {
			width: 25px;
			height: 25px;
		}
	}
}
</style>
